<template>
   <div>
      name:{{obj.name}}
      <ul>
         <li v-for="(item,index) in obj.course"   :key="index">{{item}}</li>
      </ul>
      <button @click="changeName">changeName</button>
      <button @click="changeCourse">changeCourse</button>

   </div>
</template>
<script lang = "ts">
import { defineComponent ,reactive, getCurrentInstance} from 'vue'
export default defineComponent({
  name: 'reactive',
   setup(){
      // setup执行时机
      // 在beforeCreate之前执行（执行一次），此组件对象还没有创建,
      // this是undefined,不能通过this来访问data\computed\methods\props
      // 可以通过getCurrentInstance这个函数来返回当前组件的实例对象，也就是当前vue这个实例对象
      // getCurrentInstance 
      const   {proxy} = getCurrentInstance()  //就充当this
      console.log(proxy,'proxy')


      // reactive 
      // 接收一个普通对象然后返回该普通对象的响应式代理器对象
      //响应式转换是“深层的”：会影响对象内部所有的嵌套的属性
      const  obj  = reactive({
         name:'小明',
         course:['java','Vue','PHP']
      })

      function  changeName(){
         obj.name +='改变了'
         console.log(obj.name)
      }

      function changeCourse(){
         obj.course[0] += '改变了'
         console.log(obj.course)
         
      }

      return  {
         obj,
         changeName,
         changeCourse
      }
   }
})
</script>

